<template>
  <div class="app-container">
    <!-- 用户信息 start -->
    <el-card>
      <title-line title="基本信息" />
      <div class="base-info flex">
        <img
          class="base-info-img"
          :src="avatar ? avatar : avatar_logo"
          style="width: 80px; height: 80px"
        />
        <el-row class="base-info-box ft-14 ml-20">
          <el-col
            v-for="(item, index) in baseInfo"
            :key="index"
            class="base-info-item mt-10"
            :span="6"
          >
            <span>{{ item.title }}</span>
            <span v-if="item.title">：</span>
            <span style="font-weight: bold">{{ item.value ? item.value : '暂无' }}</span>
            <el-tag
              v-if="item.key === 'nickName' && !isActivation"
              class="ml-5"
              size="mini"
              type="danger"
              effect="dark"
              style="background: #ff5f00"
            >
              待激活
            </el-tag>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 用户信息 end -->

    <el-card class="mt-20">
      <div class="flex align-center">
        <title-line title="消费信息" />
        <p class="detailTip" @click="toIntegral">积分明细</p>
      </div>
      <live-overview :show-time="false" :tabs="consumeInfoTabs" />
    </el-card>

    <div class="mt-30 text-center">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import { REGISTER_WAY, REGISTER_PLATFORM, IS_NEW } from '@/enum/user'
import { useFilterSingleStatistics } from '@/hooks'

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      avatar: '',
      isActivation: '',
      // 用户基础信息
      baseInfo: [
        {
          key: 'nickName',
          title: '',
          value: ''
        },
        {
          key: 'lastOpenTime',
          title: '上次访问',
          value: ''
        },
        {
          key: 'lastConsumeTime',
          title: '上次消费',
          value: ''
        },
        {
          key: 'registerWay',
          title: '注册方式',
          value: ''
        },
        {
          key: 'mobile',
          title: '手机号',
          value: ''
        },
        {
          key: 'isNewBuy',
          title: '是否兑换新人产品',
          value: ''
        },
        {
          key: 'openSum',
          title: '打开次数',
          value: ''
        },
        {
          key: 'registerPlatform',
          title: '注册来源',
          value: ''
        },
        {
          key: 'createdTime',
          title: '注册时间',
          value: ''
        }
      ],

      // 消费信息
      consumeInfoTabs: [
        {
          isShow: true,
          baseData: {
            key: 'totalIncomeAmount',
            label: '累计获得积分',
            value: '586.5'
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalOutlayAmount',
            label: '累计消耗积分',
            value: '130.5'
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'availableBalance',
            label: '账户留存积分',
            value: '456.0'
          }
        }
      ]
    }
  },
  computed: {
    // 默认头像
    avatar_logo() {
      return require('@/assets/avatar.jpg')
    }
  },
  watch: {},
  created() {
    // 获取用户详情
    this.getDetail()

    // 获取用户消费信息
    this.getUserFinanceTotal()
  },
  mounted() {},
  methods: {
    // 获取用户详情
    async getDetail() {
      const { data } = await this.$http.user.user.getUserInfo(this.$route.query.id)
      // 结果赋值
      const enumKey = {
        registerWay: REGISTER_WAY,
        registerPlatform: REGISTER_PLATFORM,
        isNewBuy: IS_NEW
      }
      this.avatar = data.profilePhoto
      this.isActivation = data.isActivation
      this.baseInfo = this.baseInfo.map(item => {
        const obj = { ...item }
        if (Object.keys(enumKey).includes(item.key)) {
          if (item.key === 'isNewBuy') {
            obj.value = data.isNewBuy ? '是' : '否'
          } else {
            obj.value = enumKey[item.key][data[item.key]]
          }
        } else {
          obj.value = data[item.key]
        }
        return obj
      })
      console.log(this.baseInfo)
    },

    // 获取用户消费信息
    async getUserFinanceTotal() {
      const { data } = await this.$http.finance.userFinance.getSingleWallet(this.$route.query.id)
      // 结果赋值
      this.consumeInfoTabs = useFilterSingleStatistics(this.consumeInfoTabs, data)
    },

    // 查看积分明细
    toIntegral() {
      this.$router.push({
        name: 'MemberIntegral',
        query: { id: this.$route.query.id }
      })
    },
    back() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.base-info-box {
  display: flex;
  flex-wrap: wrap;
}
::v-deep .real-time-data-item .text {
  font-weight: normal !important;
}

.detailTip {
  text-decoration: underline;
  color: #2a8af4;
  margin-left: 15px;
  cursor: pointer;
}
</style>
